<html>

<head>
	<meta charset="utf-8" />
	<title>Fast Doc</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
	<style>
		/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
		html,
		body,
		div,
		span,
		applet,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		a,
		abbr,
		acronym,
		address,
		big,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		s,
		samp,
		small,
		strike,
		strong,
		sub,
		sup,
		tt,
		var,
		b,
		u,
		i,
		center,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		fieldset,
		form,
		label,
		legend,
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		embed,
		figure,
		figcaption,
		footer,
		header,
		hgroup,
		menu,
		nav,
		output,
		ruby,
		section,
		summary,
		time,
		mark,
		audio,
		video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}

		/* HTML5 display-role reset for older browsers */
		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section {
			display: block;
		}

		body {
			line-height: 1;
		}

		ol,
		ul {
			list-style: none;
		}

		blockquote,
		q {
			quotes: none;
		}

		blockquote:before,
		blockquote:after,
		q:before,
		q:after {
			content: '';
			content: none;
		}

		html,
		body {
			font-family: Arial, Helvetica, sans-serif;
			/* height: 100%; */
		}

		body {
			font-size: .9rem;
			padding: 10px;
			border-right: 1px solid lightgray;
		}

		a {
			color: black;
			text-decoration: none;
		}

		a:visited {
			color: gray;
		}

		a:hover {
			text-decoration: underline;
			color: brown;
		}

		h1 {
			font-size: 1rem;
			font-weight: bold;
			margin: 10px 0;
			margin-top: 30px;
			line-height: 130%;
			word-break: break-all;
		}

		footer {
			text-align: center;
			color: gray;
		}

		li {
			margin-left: 16px;
			margin-bottom: 10px;
			word-break: break-all;
			overflow: hidden;
			line-height: 140%;
		}

		li .url {
			color: gray;
			font-family: 'Courier New';
		}

		/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸*/
		::-webkit-scrollbar {
			width: 5px;
			background-color: #F5F5F5;
		}

		/*定义滚动条轨道：内阴影+圆角*/
		::-webkit-scrollbar-track {
			background-color: #F5F5F5;
		}

		/*定义滑块：内阴影+圆角*/
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background-color: lightgray;
		}

		h2 {
			display: inline;

		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
	<script src="json.js"></script>
</head>

<body>
	<section style="background-color: #e3e3e3;margin-bottom:20px;padding:7px 3px;">
		FastDoc 文档生成器
		<br />
		<br />
		<a href="intro.htm" target="center">首页</a> |
		<a href="javascript:alert('TODO')">生成</a>
	</section>
	<div id="menu">
		<div v-for="(value, key) in list">
			<h1>{{value.description}} {{key}}</h1>
			<ul v-for="item in value.items">
				<li>
					<a :href="'doc.htm?key=' + key + '#' + item.id" target="center">
						<h2>{{item.name}}</h2>
						<span class="url">
							{{item.url}}
						</span>
					</a>
				</li>
			</ul>
		</div>
	</div>

	<script>
		new Vue({
			el: document.getElementById("menu"),
			data: {
				list: DOC_JSON
			}
		});
	</script>

</body>

</html>